.my-statistics {
  .title {
    width: 100%;
    padding: 10px;
    margin: 0 !important;
    background-color: #FFF;
    color: #000;
    font-size: $font-primary-large !important;
  }
  .row {
    background-color: #FFF;
    width: 100%;
    height: 75px;
    margin-top: -16px;
  }
  .nav-container {
    .my-nav-detail {
      font-size: $font-primary-large !important;
      text-align: center;
      padding-top: 12px;
      color: rgb(85, 206, 245);
    }
    .my-nav-title {
      text-align: center;
      color: rgb(105, 105, 105);
    }
  }
  .echarts {
    margin-top: 8px;
    width: 100%;
    background-color: #FFF;
    .legend {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 26%;
      background-color: #FFF;
      border-top: 1px solid #efefef;
      color: #000;
    }
    .circle {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      float: left;
      margin: 10px 12px 0 0;
    }
    .orange {
      background-color: rgb(253, 105, 79)
    }
    .purple {
      background-color: rgb(146, 155, 207)
    }
    .blue {
      background-color: rgb(85, 204, 245)
    }
    .yellow {
      background-color: rgb(247, 194, 0)
    }
    .word {
      display: inline-block;
    }
    .word.comment {
      width: 84px;
      text-align: left;
    }
    .word.number {
      width: 32px;
      text-align: right;
    }
    .word.percent {
      width: 40px;
      text-align: right;
    }
  }
}
